<template>
	<view class="light-box">
		<view class="img1-box">
			<image class="img1" :src="$util.img('/static/img/card/dz.png')" mode="heightFix"></image>
			<view class="linght">
				<view class="linght-img-box">
					<image class="linght-img" :class="'linght-' + index" v-for="(item,index) in list" :key="index"
						:src="$util.img(item.src)" :style="{
						'animation-play-state':current != index ? 'running' : 'paused',
						'display':current != index ? 'block' : 'none',
					 }"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						src: '/static/img/card/光1.png'
					}, {
						src: '/static/img/card/光2.png'
					}, {
						src: '/static/img/card/光3.png'
					},{
						src: '/static/img/card/光4.png'
					}
				],
				current: 0
			}
		},
		mounted() {
			this.setani();
		},
		methods: {
			setani() {
				this.time = setInterval(() => {
					if (this.current > 2) {
						this.current = 0;
					} else this.current += 1;
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.light-box {
		width: 100%;
		height: 100%;
		position: relative;

		.img1-box {
			position: absolute;
			bottom: 28rpx;
			left: 50%;
			transform: translateX(-50%);
			height: 200rpx;

			.img1 {
				height:300rpx;
				z-index: 9999;
			}

			.linght {
				position: absolute;
				left: 0;
				bottom: -80rpx;
				width: 100%;
				height: 100%;
				z-index: 999;

				.linght-img-box {
					position: relative;
					width: 100%;
					height: 100%;

					.linght-img {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						animation: myfirst 2s linear infinite;
						width: 100%;
					}

					.linght-0 {
						bottom: 74rpx;
						height: 520rpx;
					}

					.linght-1 {
						bottom: 84rpx;
						height: 470rpx;
					}

					.linght-2 {
						bottom: 74rpx;
						height: 240rpx;
					}

					.linght-3 {
						height: 230rpx;
						bottom: 100rpx;
					}
				}
			}
		}
	}

	@keyframes myfirst {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>